<template>
  <div style="height: 100%;" :id="id">
    <el-card shadow="hover"
             :style="{height:gadgetHeight+ 'px'}">
      <div>
        <div class="cardHeader" @mouseenter="mouseenter(true)" @mouseleave="mouseenter(false)"
             v-if="(gadgetSetting.headerTitle && gadgetSetting.headerTitle.trim().length>0) || (gadgetSetting.headerDescription && gadgetSetting.headerDescription.trim().length>0)">
              <span>
                <span
                  class="cardTitle threepoints" :title="gadgetSetting.headerTitle"
                  v-if='gadgetSetting.headerTitle && gadgetSetting.headerTitle.trim().length>0'>{{ gadgetSetting.headerTitle }}</span>
                <el-tooltip :open-delay="1000" class="item"
                            effect="dark"
                            :content="gadgetSetting.headerDescription"
                            placement="right"
                            v-if='gadgetSetting.headerDescription && gadgetSetting.headerDescription.trim().length>0'>
                <i class="cuifont icon_help_circle cardIcon"></i>
              </el-tooltip>
              </span>
              <MoreMenu :slicer='slicer' :gadgetId='id' :gadgetType='gadgetInfo.com' @updateQuery="query" @fullScreen="fullScreen"/>
          <!--<div class="btns">
            <i class="el-icon-more" @click="showBtns"></i>
            <ul class="oprateOptions" v-if="showstatus">
              <li @click="showQueryModel">edit</li>
              <li @click="delDadget(id)">delete</li>
            </ul>
          </div>-->
        </div>
        <div v-if="isHasData"
             class="content el-card__body"
             :style="{height:gadgetHeight+ 'px'}">
          <!-- ---------------------------------------------------------------------------------------------------------------------- -->
          <div class="col-md-12 control-section">
            <div class="content-wrapper">
              <ejs-kanban id="kanban"
                          keyField="Status"
                          :dataSource="datesource"
                          :cardSettings="gadgetSetting.cardSettings">
                <e-columns>
                  <e-column v-for="(item, index) in gadgetSetting.columnsList"
                            :key="index"
                            :headerText="item.label"
                            :keyField="item.status"></e-column>
                </e-columns>
              </ejs-kanban>
            </div>
          </div>
          <!-- ---------------------------------------------------------------------------------------------------------------------- -->
        </div>
        <div v-else
             class="gadget-no-data">
          <el-image @click="query()"
                    :src='noDataImageUrl'
                    fit='fill'></el-image>
        </div>
      </div>
    </el-card>
    <model :showSetting="queryModelDefaultSetting.showSetting"
           @queryModelClosed="queryModelClosed"
           :dataInfo="queryModelDefaultSetting.dataInfo"
           :updateGadget="upgradeGadgetSetting"/>
  </div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
import Vue from 'vue'

import { defaultGadgetSettingList } from '@/utils/data-json'

export default Vue.extend({
  mixins: [mixinGadgetViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model')
  },
  data: function () {
    return {
      datesource: [
        {
          'Id': 'Task 1',
          'Title': 'Task - 29001',
          'Status': 'Open',
          'Summary': 'Analyze the new requirements gathered from the customer.',
          'Type': 'Story',
          'Priority': 'Low',
          'Tags': 'Analyze,Customer',
          'Estimate': 3.5,
          'Assignee': 'Nancy Davloio',
          'RankId': 1,
          'Color': '#8b447a'
        },
        {
          'Id': 'Task 2',
          'Title': 'Task - 29002',
          'Status': 'InProgress',
          'Summary': 'Improve application performance',
          'Type': 'Improvement',
          'Priority': 'Normal',
          'Tags': 'Improvement',
          'Estimate': 6,
          'Assignee': 'Andrew Fuller',
          'RankId': 1,
          'Color': '#7d7297'
        },
        {
          'Id': 'Task 3',
          'Title': 'Task - 29003',
          'Status': 'Open',
          'Summary': 'Arrange a web meeting with the customer to get new requirements.',
          'Type': 'Others',
          'Priority': 'Critical',
          'Tags': 'Meeting',
          'Estimate': 5.5,
          'Assignee': 'Janet Leverling',
          'RankId': 2,
          'Color': '#27AE60'
        }
      ],
      gadgetSetting: {},
      loading: false,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: 'kanbangadget',
          gadgetSetting: this._.find(defaultGadgetSettingList, { gadgetType: 'kanbangadget' }).gadgetSetting
          // gadgetSetting: {
          //   columnsList: [
          //     {
          //       label: 'To Do',
          //       status: 'Open'
          //     },
          //     {
          //       label: 'In Progress',
          //       status: 'InProgress'
          //     },
          //     {
          //       label: 'Testing',
          //       status: 'Testing'
          //     },
          //     {
          //       label: 'Done',
          //       status: 'Close'
          //     }
          //   ],
          //   cardSettings: {
          //     contentField: 'Summary',
          //     headerField: 'Id',
          //     tagsField: 'Tags',
          //     grabberField: 'Color',
          //     footerCssField: 'ClassName'
          //   },
          //   headerTitle: '',
          //   headerDescription: ''
          // }
        }
      }
    }
  },
  beforeCreate () {
    // this.$options.components.model = () => import('@/components/gadget/query-model/query-model')
  },
  created () {
    this.gadgetHeight = (this.gadgetInfo.h * 20) - 20
    this.query()
    this.subscribeMessage('runReport', this.query)
    this.$store.state.isWidget = false
  },
  methods: {
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = (newH * 20) - 20
      this.gadgetWidth = newWPx
    },
    query () {
      this.loading = true
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      var _self = this
      var param = {
        ...this.slicer,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        pageId: this.pageId,
        gadgetId: this.id,
        filter: this.getFilterStr()
      }
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        // _self.verifyHasData(res)
        this.isHasData = true
        if (res.config) {
          _self.gadgetSetting = Object.assign({}, _self._.merge(_self.gadgetSetting, res.config))
        }
        // if (res.data && res.data.length > 0) {
        //   let tempData = res.data
        //   _self.datesource = tempData
        // }

        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    upgradeGadgetSetting (gadgetSetting) {
      // this.queryModelDefaultSetting.dataInfo.gadgetSetting = Object.assign({}, gadgetSetting)
    }

  },
  provide: {
    kanban: []
  }
})
</script>
<style scoped>
.el-card ::v-deep .el-card__body {
  padding: 0px !important;
}

.el-card ::v-deep .el-divider--horizontal {
  margin: 3px 0 !important;
}

.threepoints {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.cardHeader > span {
  display: inline-block;
  width: calc(100% - 30px);
}

.cardTitle {
  font-size: 16px;
  color: #000;
  font-weight: 700;
  display: inline-block;
  max-width: calc(100% - 30px);
  position: relative;
  top: 2px;
}

.cardIcon {
  font-size: 16px;
  font-weight: 600;
  margin-left: 10px;
  position: relative;
  top: -2px;
}
</style>
